// 项目的根组件，一切组件的根基
// App被引入到了index.js,渲染到public/index.html文件中id为root的div

// React中的事件绑定，通过语法 `on + 事件名称 = { 事件处理程序 }`，整体上遵循驼峰命名法

function App05() {
  const handleClick = () => {
    console.log('button被点击了')
  }

  // 事件参数e
  const handleClick2 = (e) => {
    console.log('button被点击了', e)
  }

  // 传递自定义参数
  const handleClick3 = (name) => {
    console.log('button被点击了', name)
  }

  // 既要传递自定义参数，又要事件对象
  const handleClick4 = (name, e) => {
    console.log('button被点击了', name, e)
  }

  return (
    <div className="App">
      {/* 
      调用函数渲染不同的模板
      */}
      <button onClick={handleClick}>点击我</button>
      <button onClick={handleClick2}>点击我带事件</button>
      {/* 传参数必须用箭头函数写法 */}
      <button onClick={() => handleClick3("Tom")}>点击我带自定义参数</button>
      {/* 传参跟形参顺序保持一致 */}
      <button onClick={(e) => handleClick4("Jack", e)}>点击我带自定义参数和事件</button>
    </div>
  )
}

export default App05
